<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>AWS SSO Authentication</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <style>
    html {
      height: 100%;
    }

    body {
      box-sizing: border-box;
      min-height: 100%;
      margin: 0;
      padding: 15px 30px;
      display: flex;
      flex-direction: column;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 0.9rem;
      background-color: #f2f3f3;
      justify-content: center;
      min-width: 400px;
    }

    .flex-container {
      background-color: #ffffff;
      width: 30%;
      margin: 0 auto;
      padding: 2% 2% 1% 2%;
      max-width: 400px;
      box-shadow: 0px 1px 1px 1px #8a969a;
    }

    .request {
      border-block: 1px solid;
      border-inline: 1px solid;
      border-end-end-radius: 3px;
      border-end-start-radius: 3px;
      border-start-end-radius: 3px;
      border-start-start-radius: 3px;
      margin-top: 5%;
      padding: 5%;
      display: flex;
      flex-direction: row;
    }

    .request h4 {
      margin: 1% 1% 1% 0%;
    }

    .request p {
      margin-bottom: 0;
      margin-top: 2%;
    }

    .approval {
      background-color: #95d7ff;
      border-color: #2096F3;
    }

    .denial {
      background-color: #fff7f7;
      border-color: #d91515;
    }

    .request-container {
      width: 100%;
    }

    .success-icon {
      color: #1d8102;
      padding-right: 5px;
    }

    .denial-icon {
      color: #d91515;
      padding-right: 5px;
    }

    .center-icon {
      width: 100%;
      text-align: center;
    }

    .hidden {
      display: none;
      visibility: none;
    }

    .hint {
      color: #545b64;
    }

    .http4k-icon {
      margin-bottom: 50px;
    }
  </style>
</head>

<body>
<div class="center-wrapper">
  <div style="font-size: 3rem" class="center-icon http4k-icon">
    <svg width="185" height="56" viewBox="0 0 185 56" fill="none" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
      <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="58" height="56">
        <rect width="58" height="56" fill="url(#pattern0)"/>
      </mask>
      <g mask="url(#mask0)">
        <rect x="-5" y="-5" width="63" height="64" fill="#6DBEFF"/>
        <path d="M11 7L28.9273 7.49398L27.8727 23.7952L39.4727 24.7831L40 48L27.8727 47.012L28.4 32.6867H14.6909L11 7Z"
              fill="#2D2D2D"/>
      </g>
      <mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="66" y="0" width="119" height="56">
        <rect x="66" width="119" height="56" fill="url(#pattern1)"/>
      </mask>
      <g mask="url(#mask1)">
        <rect x="66" y="6" width="124" height="41" fill="#2D2D2D"/>
      </g>
      <defs>
        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlink:href="#image0" transform="translate(-0.00196919) scale(0.00245055)"/>
        </pattern>
        <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlink:href="#image1" transform="translate(-0.505161) scale(0.00119439 0.00253807)"/>
        </pattern>
        <image id="image0" width="1261" height="394"
               xlink:href=""/>
        <image id="image1" width="1261" height="394"
               xlink:href=""/>
      </defs>
    </svg>


  </div>
  <div class="flex-container">
    <!-- Section for request approval -->
    <div id="approved-auth">
      <div class="request approval">
        <span class="pass-icon icon-2x icon icon-vscode-pass success-icon"></span>
        <div class="request-container">
          <h4>Request approved</h4>
          <p id="approvalMessage" class="hint"></p>
        </div>
      </div>
      <p id="footerText" class="hint"></p>
    </div>

    <!-- Section for request denial -->
    <div id="denied-auth" class="hidden">
      <div class="request denial">
        <span class="icon-2x icon icon-vscode-error denial-icon"></span>
        <div class="request-container">
          <h4>Request denied</h4>
          <p id="errorMessage" class="hint"></p>
        </div>
      </div>
      <p class="hint">You can close this window and re-start the authorization flow.</p>
    </div>
  </div>
</div>
<script>
  window.onload = () => {
    const params = new URLSearchParams(window.location.search)

    const error = params.get('error')
    if (error) {
      showErrorMessage(error)
      return
    }

    const productName = 'http4k Connect'
    document.getElementById('approvalMessage').innerText = `${productName} has been given requested permissions`
    document.getElementById('footerText').innerText = `You can close this window and start using ${productName}.`

    function showErrorMessage(errorText) {
      document.getElementById('approved-auth').classList.add('hidden')
      document.getElementById('denied-auth').classList.remove('hidden')
      document.getElementById('errorMessage').innerText = errorText
    }
  }
</script>
</body>
</html>
